<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--引入本地 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>


    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>

    <link rel="stylesheet" href="../css/base.css">
    <title>服务大厅</title>
    <link rel="stylesheet" href="../plugin/swiper/swiper-bundle.min.css">
</head>

<body>
    <div id="app">
        <div class="contaiiner">
            <!-- Swiper -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,index) in lunboList"><img :src="item.tp" alt=""></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div>
                <div class="title">服务中心</div>
                <div class="txtBox">
                    <table border="1" class="tablebox" cellspacing="0" width="100%">
                        <tr>
                            <td @click="zhbdBtn">
                                <div class="txtcard">
                                    <div class="imgbox">
                                        <i class="ifonts el-icon-s-help green"></i>
                                    </div>
                                    <div class="txtbox">
                                        <div class="txtcard-txt">账户绑定</div>
                                        <div class="txtcard-txt2 txtwrap">户号绑定</div>
                                    </div>
                                </div>
                            </td>
                            <td @click="jfjlBtn">
                                <div class="txtcard">
                                    <div class="imgbox">
                                        <i class="ifonts el-icon-s-claim yellow"></i>
                                    </div>
                                    <div class="txtbox">
                                        <div class="txtcard-txt">缴费记录</div>
                                        <div class="txtcard-txt2 txtwrap">费用缴纳明细</div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td @click="jfBtn">
                                <div class="txtcard">
                                    <div class="imgbox">
                                        <i class="ifonts el-icon-platform-eleme appgreen"></i>
                                    </div>
                                    <div class="txtbox">
                                        <div class="txtcard-txt">在线缴费</div>
                                        <div class="txtcard-txt2 txtwrap">在线缴费</div>
                                    </div>
                                </div>
                            </td>
							<td @click="">
							    <div class="txtcard">
							        <div class="imgbox">
										<div style="width: 45px;height: 45px;">
											<el-image src="../images/nonghang.jpg" fit="cover"></el-image>
										</div>
							            <!-- <i class="ifonts el-icon-platform-eleme appgreen"></i> -->
							        </div>
							        <div class="txtbox">
							            <div class="txtcard-txt">农行APP缴费</div>
							            <div class="txtcard-txt2 txtwrap">农行APP缴费</div>
							        </div>
							    </div>
							</td>
                        </tr>
                    </table>
                </div>

            </div>
            <div>
                <div class="title">信息公告</div>
                <div class="txtBox">
                    <table border="1" class="tablebox" cellspacing="0" width="100%">
                        <tr>
                            <td @click="yywdBtn">
                                <div class="txtcard">
                                    <div class="imgbox">
                                        <i class="ifonts el-icon-s-flag green1"></i>
                                    </div>
                                    <div class="txtbox">
                                        <div class="txtcard-txt">营业网点</div>
                                        <div class="txtcard-txt2 txtwrap">线下网点</div>
                                    </div>
                                </div>
                            </td>
                            <td @click="jgbzBtn">
                                <div class="txtcard">
                                    <div class="imgbox">
                                        <i class="ifonts el-icon-s-marketing green2"></i>
                                    </div>
                                    <div class="txtbox">
                                        <div class="txtcard-txt">价格标准</div>
                                        <div class="txtcard-txt2 txtwrap">价格标准信息</div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td @click="kuaixun">
                                <div class="txtcard">
                                    <div class="imgbox">
                                        <i class="ifonts el-icon-s-opportunity green3"></i>
                                    </div>
                                    <div class="txtbox">
                                        <div class="txtcard-txt">公司快讯</div>
                                        <div class="txtcard-txt2 txtwrap">公司信息</div>
                                    </div>
                                </div>
                            </td>
                            <td @click="tongzhi">
                                <div class="txtcard">
                                    <div class="imgbox">
                                        <i class="ifonts el-icon-s-comment green4"></i>
                                    </div>
                                    <div class="txtbox">
                                        <div class="txtcard-txt">通知公告</div>
                                        <div class="txtcard-txt2 txtwrap">充值缴费公告</div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>

            </div>
        </div>

        <div class="bottom-box">
            <div class="bottom">
                <div class="bottomnav" :class="showActive?'active':''" @click="intoiframe(0)">
                    <div><i class="ifont el-icon-s-home"></i></div>
                    <div>服务大厅</div>
                </div>
                <div class="bottomnav" :class="showActive?'':'active'" @click="intoiframe(1)">
                    <div><i class="ifont el-icon-s-custom"></i></div>
                    <div>个人中心</div>
                </div>
            </div>
        </div>

    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            showActive: true,
            lunboList:[],
            parmsData:{code:""},
        },
        created() {
            localStorage.setItem("user", JSON.stringify({"org_id":"hetianjiangrun"}));
            this.loginOpenid();
            this.loadLunbotu();
        },
        methods: {
            //登录
            async loginOpenid(){
                this.parmsData = getParams();
                if(this.parmsData.code != "" && this.parmsData.code != undefined){
                    const res = await postWebCustom(getTableId("1922"),{code:this.parmsData.code});
                    if(res.code == 0){
                        this.$message(res.msg);
                        return;
                    }
                    if(res.data.openid){
                        localStorage.setItem("token",res.data.openid);
                    }
                }else {
                    let token = localStorage.getItem("token");
                    let url = wwwurl+"/admin/html/module/hetianjiangrun/html/indexfwdt.html";
                    window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9c3b195a2c40e4df&redirect_uri="+url+"&response_type=code&scope=snsapi_base&#wechat_redirect";
                }

            },
            //加载轮播图
            async loadLunbotu(){
                const res = await listAdmin(getTableId("1915"),"pxh",{"stat":"1"});
                this.lunboList = res.data;
            },
            intoiframe(code) {
                if (code == 1) {
                    this.showActive = false;
                    location.href = '../html/indexgrzx.html'
                } else {
                    this.showActive = true;
                    location.href = '../html/indexfwdt.html'
                }
            },
            zhbdBtn(){
                location.href = './children/userBinding.html'
            },
            jfjlBtn(){
                location.href = './children/tradeRecords.html'
            },
            //在线缴费
            async jfBtn(){
                const res = await postWebCustom(getTableId("1927"),{});
                if(res.code == 0){
                    this.zhbdBtn();
                }else {
                    location.href = './children/payRecharge.html'
                }
            },
            yywdBtn(){
                location.href = './children/businessOutlets.html'
            },
            jgbzBtn(){
                location.href = './children/priceStandard.html'
            },
            tongzhi(){
                location.href = "/admin/html/module/hetianjiangrun/html/children/tongzhigonggao.html";
            },
            kuaixun(){
                location.href = "/admin/html/module/hetianjiangrun/html/children/gongsikuaixun.html";
            }
        },

    })
</script>
<script src="../plugin/swiper/swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper(".mySwiper", {
        pagination: {
            el: ".swiper-pagination",
        },
    });
</script>
<style type="text/css">
    .contaiiner {
        padding: 0 0 60px 0;
        min-height: calc(100vh - 80px);
        background-color: rgb(228, 225, 225);
    }

    .iframebox {
        height: calc(100vh - 80px);
    }

    /* 底部导航 */
    .bottom-box {
        position: fixed;
        background-color: #fff;
        bottom: 0;
        width: 100%;
    }

    .bottom {
        padding: 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
    }

    .bottomnav {
        width: 100%;
    }

    .ifont {
        font-size: 40px;
    }

    .active {
        color: #409eff;
    }

    .swiper {
        width: 100%;
        height: 240px;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .tablebox,
    .tablebox tr td {
        border-color: rgb(233, 233, 233);
        box-shadow: none;
        border-collapse: collapse;
        overflow: hidden;
    }

    .title {
        font-weight: 700;
        padding: 15px 8px;
    }

    .txtBox {
        background: #fff;
        /* display: flex;
        flex-wrap: wrap; */
        /* justify-content: space-between; */
    }

    .txtcard {
        width: 100%;
        display: flex;
        justify-content: left;
        align-items: center;
        padding: 8px 0;
    }

    .imgbox {
        width: 120px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .imgbox el-image {
        margin: 0;
        /* width: 40px;
        height: 40px; */
    }

    .txtbox {
        width: 100%;
    }

    .txtcard-txt {
        font-size: 18px;
    }

    .txtcard-txt2 txtwrap {
        color: rgb(127, 127, 127);
        font-size: 12px;
    }
    .ifonts{
        font-size: 50px;
    }
    .green{
        color: rgb(78, 201, 101);
    }
    .yellow{
        color: rgb(228, 239, 82);
    }
    .appgreen{
        color: rgb(38, 83, 46);
    }
    .green1{
        color: rgb(58, 218, 143);
    }
    .green2{
        color: rgb(74, 167, 217);
    }
    .green3{
        color: rgb(74, 217, 217);
    }
    .green4{
        color: rgb(59, 126, 173);
    }
    .txtwrap {
        word-break: break-word;
    }
</style>

</html>